<template>
  <div>
    <van-nav-bar :title="t('check.inventoryOrder')" left-arrow @click-left="onClickLeft" placeholder fixed />

    <van-cell-group>
      <van-cell v-for="(item, i) in inventoryFormList" :key="i">
        <template #title>
          <span class="van-multi-ellipsis--l2" @click="goOperate(item.inventoryOrderId)">{{ item.inventoryNo }}</span>
        </template>
        <template #label>
          <span v-if="item.status === 1" style="padding: 5px 10px; border-radius: 5px; background-color: #ecf5ff; color: #409EFF; border: 1px solid #b3d8ff;">{{ '待盘点' }}</span>
          <span v-if="item.status === 2" style="padding: 5px 10px; border-radius: 5px; background-color: #f6f1eb; color: #E6A23C; border: 1px solid #E6A23C;">{{ '需复盘' }}</span>
        </template>
        <template #right-icon>
          <van-icon name="arrow" />
        </template>
      </van-cell>
    </van-cell-group>
  </div>
</template>

<script setup lang="ts">
import { useI18n } from "vue-i18n";
import { postRequest } from "@/api";
import router from "@/router";

const { t } = useI18n();
const onClickLeft = () => history.back();

interface OrderForm {
  inventoryNo: string,
  inventoryOrderId: number,
  status: number,
};

let inventoryFormList = ref<OrderForm[]>();
const goOperate = (inventoryOrderId) => {
  router.push({
    name: 'checkOperate',
    query: {
      inventoryOrderId
    }
  });
}
onMounted(async () => {
  const res = await postRequest(
    '/inventoryOrder/getPageList', {}
  )
  inventoryFormList.value = res.data?.inventoryOrderDTOList?.filter(item => item?.status === 1 || item?.status === 2) || []
});
</script>

<style scoped lang="less">
:deep(.van-cell) {
  font-size: 1rem;
}

:deep(.van-nav-bar__title) {
  font-size: 1rem;
  font-weight: 500;
  color: white;
}

:deep(.van-nav-bar__content) {
  background: #1b82d2;
}

:deep(.van-nav-bar .van-icon) {
  color: white;
}
</style>